<template>
	<view>
		<NavBar :isBack='true' :isRbtn='true' :title='title' @onRight="handRight" :rightTitle="rightTitle"></NavBar>
		<image src="https://gfgn.oss-cn-beijing.aliyuncs.com/temp/signPageBj_1731650852813.png" class="signPageBj">
		</image>
		<view class="container">
			<view class="flex signBox">
				<view>
					<view>{{awaitPoint}}<text style="font-size: 28rpx;">积分</text></view>
					<view class="immediatelySign" @click="singVipId">立即签到</view>
				</view>
				<image src="../../static/info/integralBj.png" class="integralBj"></image>
			</view>
			<view class="alreadySignBox">
				<view class="alreadySignText">已连签{{dayNum}}天</view>
				<view class="flex" style="justify-content: space-between;">
					<view v-for="(item,index) in dayList" :key="index">
						<view class="flex  dayBox" :class="index+1<=dayNum?'':'dayAsh'">
							<view>+{{item.num}}</view>
							<image
								:src="index+1<=dayNum?'../../static/info/yellowPick.png':'../../static/info/ashPick.png'"
								class="yellowPick"></image>
						</view>
						<view>第{{item.day}}天</view>
					</view>
				</view>
			</view>
			<view class="conversionBox">
				<view>兑换专区</view>
				<view class="flex shopBox" v-for="(item,index) in shopList" :key="index">
					<image src="../../static/index/KF.png" class="conversionImg"></image>
					<view style="flex: 1;">
						<view>{{item.name}}</view>
						<view class="day" v-if="!item.days"></view>
						<view class="day" v-else>{{item.days}}</view>
						<view class="flex center conversionBtns">
							<view>{{item.pointAmount}}积分</view>
							<view class="conversionBtn" @click="exChangeVip(item)">兑换</view>
						</view>
					</view>
				</view>
				<view class="more">更多商品敬请期待</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		exChangeVip,
		singVipId,
		singInfoId,
		vipShops,
		myIncome,
		userSingConf
	} from '../../common/api.js'
	import NavBar from "../../components/NavBar.vue"
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				title: '签到领积分',
				rightTitle: '积分规则',
				dayList: [{
					day: '一',
					num: 0
				}, {
					day: '二',
					num: 0
				}, {
					day: '三',
					num: 0
				}, {
					day: '四',
					num: 0
				}, {
					day: '五',
					num: 0
				}, {
					day: '六',
					num: 0
				}, {
					day: '七',
					num: 0
				}],
				dayNum: 0,
				incDays: 0,
				userInfo: null,
				awaitPoint: 0,
				shopList: []
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.userInfo = uni.getStorageSync('userInfo')
			// #endif
			this.myIncome()
			this.vipShops()
			this.singInfoId()
			this.userSingConf()
		},
		methods: {
			// 获取配置信息
			userSingConf() {
				userSingConf().then(res => {
					this.dayList.map((day, index) => {
						if (index == 0 && this.incDays == 0) {
							day.num = res.result.defPoint
						} else if (this.incDays == 0) {
							day.num = res.result.defPoint + (index * res.result.incPoint)
						} else {
							day.num = (res.result.defPoint + (this.incDays * res.result.incPoint)) - res
								.result.incPoint
						}
					})
				})
			},
			// 签到
			singVipId() {
				singVipId(this.userInfo.id).then(res => {
					console.log(res)
					this.$toast(res.message)
					if (res.success) {
						this.singInfoId()
						this.myIncome()
					}
				})
			},
			// 会员签到信息   已签多少天
			singInfoId() {
				singInfoId(this.userInfo.id).then(res => {
					this.dayNum = res.result.coiledDays || 0
					this.incDays = res.result.incDays || 0
				})
			},
			// 兑换商品
			exChangeVip(item) {
				exChangeVip({
					userId: this.userInfo.id,
					vipShopId: item.id
				}).then(res => {
					this.$toast(res.message)

				})
			},
			// 获取兑换商品
			vipShops() {
				vipShops().then(res => {
					this.shopList = res.result
				})
			},
			// 获取收益   积分
			myIncome() {
				myIncome({
					userId: this.userInfo.id
				}).then(res => {
					this.awaitPoint = res.result.awaitPoint || 0
				})
			},
			handRight() {
				uni.navigateTo({
					url: '/pages/info/richText?type=3'
				})
			}
		}
	}
</script>

<style scoped>
	.more {
		color: #9e9e9e;
		font-size: 24rpx;
		font-weight: 700;
		text-align: center;
		margin-top: 20rpx;
	}

	.conversionBtn {
		width: 148rpx;
		height: 54rpx;
		border-radius: 82rpx;
		opacity: 1;
		background: #ff9c33;
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		line-height: 54rpx;
	}

	.conversionBtns {
		color: #d73c38;
		font-size: 24rpx;
		font-weight: 500;
		justify-content: space-between;
		flex: 1;

	}

	.day {
		color: #999999;
		font-size: 28rpx;
		font-weight: 500;
		margin: 16rpx 0 54rpx;
	}

	.shopBox {
		height: 186rpx;
		border-bottom: 2rpx solid #F1F1F1;
		padding: 32rpx 0;
	}

	.conversionImg {
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
		margin-right: 48rpx;
	}

	.conversionBox {
		width: 608rpx;
		height: 884rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: #ffffff;
		margin: 22rpx 32rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 700;
		padding: 18rpx 40rpx 28rpx 38rpx;
	}

	.dayBox {
		width: 70rpx;
		height: 104rpx;
		border-radius: 10rpx;
		background: #fff6ed;
		color: #ff9c33;
		font-size: 28rpx;
		font-weight: 500;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 4rpx;
	}

	.dayAsh {
		background: #EDEDED;
		color: #333333;
	}

	.alreadySignText {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 30rpx;
	}

	.yellowPick {
		width: 30rpx;
		height: 30rpx;
	}

	.immediatelySign {
		width: 224rpx;
		height: 70rpx;
		color: #ffaf5a;
		font-size: 32rpx;
		font-weight: 500;
		background: #FBF0E5;
		border-radius: 34rpx;
		line-height: 70rpx;
		text-align: center;
		border: 2rpx solid #ffffff;
		margin-bottom: 20rpx;
	}

	.integralBj {
		width: 430rpx;
		height: 378rpx;
		margin-right: -10rpx;
	}

	.signBox {
		width: 698rpx;
		justify-content: space-between;
		padding-left: 52rpx;
		margin-top: 170rpx;
		height: 280rpx;
		align-items: center;
		color: #333333;
		font-size: 72rpx;
		font-weight: 700;
	}

	.container {
		position: absolute;
		top: 0;
		left: 0;
	}

	.signPageBj {
		width: 100%;
	}

	.alreadySignBox {
		width: 634rpx;
		height: 210rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: #ffffff;
		color: #9e9e9e;
		font-size: 20rpx;
		font-weight: 500;
		margin: 20rpx 30rpx 22rpx;
		padding: 22rpx 22rpx 38rpx 30rpx;
	}
</style>
<style>
	page {
		background-color: #F4F5F9;
	}
</style>